<!-- 这是一个测试文件，展示如何使用修复后的scEcharts组件 -->
<template>
  <div style="padding: 20px;">
    <h2>修复后的scEcharts组件测试</h2>
    
    <!-- 基础用法 -->
    <div style="margin-bottom: 20px;">
      <h3>基础柱状图</h3>
      <scEcharts 
        :option="barOption" 
        height="300px" 
        width="100%"
        ref="barChartRef"
      />
    </div>
    
    <!-- 饼图 -->
    <div style="margin-bottom: 20px;">
      <h3>饼图</h3>
      <scEcharts 
        :option="pieOption" 
        height="300px" 
        width="50%"
        ref="pieChartRef"
      />
    </div>
    
    <!-- 控制按钮 -->
    <div>
      <el-button @click="updateData" type="primary">更新数据</el-button>
      <el-button @click="resizeCharts" type="success">手动resize</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import scEcharts from './index.vue';

const barChartRef = ref();
const pieChartRef = ref();

// 柱状图配置
const barOption = reactive({
  title: { text: '修复测试 - 柱状图' },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
});

// 饼图配置
const pieOption = reactive({
  title: { text: '修复测试 - 饼图' },
  series: [{
    type: 'pie',
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ]
  }]
});

// 更新数据测试
const updateData = () => {
  // 更新柱状图数据
  barOption.series[0].data = barOption.series[0].data.map(() => 
    Math.floor(Math.random() * 300)
  );
  
  // 更新饼图数据
  pieOption.series[0].data = pieOption.series[0].data.map(item => ({
    ...item,
    value: Math.floor(Math.random() * 1000)
  }));
};

// 手动resize测试
const resizeCharts = () => {
  barChartRef.value?.resize();
  pieChartRef.value?.resize();
};
</script>

<style scoped>
h2, h3 {
  color: #333;
  margin-bottom: 10px;
}
</style>